import { Tag } from "antd"

import { IResponseItem } from "@/api/agent/agencyReview/addReview/types"
import TooltipText from "@/components/common/tooltipText"
import { useDataMapping, useDigital } from "@/hooks"
import { useLocale } from "@/locales"

const useAgentReviewColumn = () => {
	const { newFormat } = useLocale()
	const { getLabel } = useDataMapping()
	const { renderCopyNo } = useDigital()
	const matchAuditStatusClass = (auditStatus: number) => {
		switch (auditStatus) {
			case 0:
				return "deleteRgba"
			case 1:
				return "lockingRgba"
			case 2:
				return "normalRgba"
			case 3:
				return "disableRgba"
			default:
				return "normalRgba"
		}
	}

	const auditNum = {
		dataIndex: "auditNum",
		align: "center",
		key: "auditNum",
		width: 200,
		title: newFormat("agent.audit_number"),
		render: (_text: any, record: IResponseItem) => <span>{record.auditNum || "-"}</span>
	}

	const agentAccount = {
		dataIndex: "agentAccount",
		width: 150,
		key: "agentAccount",
		align: "center",
		title: newFormat("agent.agent_account"),
		render: (_text: any, record: IResponseItem) => <span>{record.userName || "-"}</span>
	}

	const agentAccountCopy = {
		dataIndex: "userName",
		width: 150,
		key: "userName",
		align: "center",
		title: newFormat("agent.agent_account"),
		render: renderCopyNo
	}

	const proxyTier = {
		dataIndex: "proxyTier",
		align: "center",
		key: "proxyTier",
		width: 120,
		title: () => {
			return (
				<>
					<div>{newFormat("agent.proxy_tier")}</div>
					{newFormat("agent.tier_name")}
				</>
			)
		},
		render: (_text: any, record: IResponseItem) => <div>{record.proxyLevel + "/" + record.proxyLevelName}</div>
	}
	const applyName = {
		dataIndex: "applyName",
		align: "center",
		key: "applyName",
		width: 140,
		title: newFormat("agent.apply_people"),
		render: (_text: any, record: IResponseItem) => <span>{record.applyName || "-"}</span>
	}
	const applyTime = {
		dataIndex: "applyTime",
		align: "center",
		key: "applyTime",
		width: 120,
		title: newFormat("agent.apply_time"),
		render: (_text: any, record: IResponseItem) => <TooltipText text={record.applyTime || "-"} />
	}
	const applyInfo = {
		dataIndex: "applyInfo",
		align: "center",
		key: "applyInfo",
		width: 140,
		title: newFormat("agent.apply_info"),
		render: (text: any) => (text ? <TooltipText width={120} text={text} /> : "-")
	}

	const auditStatus = {
		title: newFormat("agent.approval_status"),
		width: 140,
		align: "center",
		key: "auditStatus",
		dataIndex: "auditStatus",
		render: (_text: any, record: IResponseItem) => {
			const matchAuditStatus = (auditStatus: number) => {
				switch (auditStatus) {
					case 0:
						return "orange"
					case 1:
						return "blue"
					case 2:
						return "green"
					case 3:
						return "red"
					default:
						return "gray"
				}
			}
			const label = getLabel(record.auditStatus, "agentAuditStatus")
			return (
				<Tag style={{ padding: "0 5px", textAlign: "center" }} color={matchAuditStatus(record.auditStatus)}>
					{newFormat(label) || "-"}
				</Tag>
			)
		}
	}
	const lockDatetime = {
		dataIndex: "lockDatetime",
		align: "center",
		width: 180,
		title: newFormat({ id: "agent.lock_time" }),
		render: (text: any) => <span>{text || "-"}</span>
	}
	const reviewerAndTime = {
		dataIndex: "reviewerAndTime",
		align: "center",
		width: 180,
		title: () => {
			return (
				<>
					<div>{newFormat({ id: "agent.audit_people" })}</div>
					{newFormat({ id: "agent.audit_complete_time" })}
				</>
			)
		},
		render: (_text: any, record: any) => (
			<div>
				<p>{record.auditName || "-"}</p>
				<p>{record.auditTime || record.auditDatetime || "-"}</p>
			</div>
		)
	}

	const createdAtTime = {
		dataIndex: "createdAt",
		align: "center",
		key: "createdAt",
		width: 140,
		title: newFormat("agent.apply_time"),
		render: (_text: any, record: any) => <span>{record.createdAt || "-"}</span>
	}

	const eventIdNoCopy = {
		dataIndex: "eventId",
		align: "center",
		key: "eventId",
		width: 200,
		title: newFormat("agent.audit_number"),
		render: (text: any) => (text ? <TooltipText text={text} /> : "-")
	}

	const auditStatus1 = {
		title: newFormat("agent.audit_status"),
		width: 100,
		align: "center",
		key: "auditStatus",
		dataIndex: "auditStatus",
		render: (_text: any, record: IResponseItem) => {
			return (
				<span className={matchAuditStatusClass(record.auditStatus)}>
					{getLabel(record.auditStatus, "agentAuditStatus", false)}
				</span>
			)
		}
	}

	const reviewerAndAuditDatetime = {
		dataIndex: "reviewerAndTime",
		align: "center",
		width: 140,
		title: () => {
			return (
				<>
					<div>{newFormat({ id: "agent.audit_people" })}</div>
					{newFormat({ id: "agent.audit_complete_time" })}
				</>
			)
		},
		render: (_text: any, record: any) => (
			<div>
				<p>{record.auditName || "-"}</p>
				<p>{record.auditDatetime || "-"}</p>
			</div>
		)
	}

	return {
		eventIdNoCopy,
		createdAtTime,
		reviewerAndTime,
		lockDatetime,
		auditStatus,
		applyInfo,
		applyName,
		proxyTier,
		applyTime,
		agentAccount,
		auditNum,
		auditStatus1,
		reviewerAndAuditDatetime,
		agentAccountCopy
	}
}

export default useAgentReviewColumn
